<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>Bootstrap 搜索建议插件</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件">
    <meta name="Keywords" content="Bootstrap Search Suggest,bootstrap,搜索建议插件">
    <meta name="author" content="http://lzw.me">
    <link id="bscss" href="../lib/bsv3/style.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            max-width: 1000px;
            margin: auto;
            padding: 20px;
        }
        h3{
            margin-top: 1.2rem;
            border-bottom: 1px #eee solid;
        }
        .row{
            margin-bottom: 10px;
        }
        .pd5{
            padding: 5px;
        }
        .pd10{
            padding: 10px;
        }
        .mg5 {
            margin: 5px;
        }
        .mg10 {
            margin: 10px;
        }
        .mb10 {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>bootstrap combox 搜索建议插件（独立引用方式示例）</h2>
        <p>这是一个基于 bootstrap 按钮式下拉菜单组件 (
        <a target="_blank" href="http://getbootstrap.com/components/#input-groups-buttons-dropdowns">V3</a> /
        <a target="_blank" href="http://v4-alpha.getbootstrap.com/components/input-group/#buttons-with-dropdowns">V4</a>
         ) 的搜索建议插件。</p>
        <p><a href="https://github.com/lzwme/bootstrap-suggest-plugin" target="_blank">Github</a></p>

        <p>使用示例：
            <a class="btn btn-info" href="https://github.com/lzwme/bootstrap-suggest-plugin/blob/master/demo/demo.js" target="_blank">demo.js</a>
            <a class="btn btn-info" href="../test/" target="_blank">功能测试</a>
        </p>

         <p><b>注意：当前页面为不依赖 bootstrap 整个库，只提取(bootstrap 3.3.7)必要内容使用的示例。</b></p>

        <div>
            <h3>测试(首次从 URL 获取数据)</h3>
            <p>配置了 data-id，非下拉菜单选择输入则背景色警告。</p>

            <p id="methodTest">
                <button class="btn btn-success btn-success-outline">disable</button>
                <button class="btn btn-success btn-success-outline">enable</button>
                <button class="btn btn-success btn-success-outline">show</button>
                <button class="btn btn-success btn-success-outline">hide</button>
                <button class="btn btn-success btn-success-outline">version</button>
                <button class="btn btn-success btn-success-outline">destroy</button>
                <button class="btn btn-success btn-success-outline">init</button>
            </p>

            <div class="row">
                <div class="col-lg-2">
                    <div class="input-group">
                        <input type="text" class="form-control" id="test">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>

            <h3>测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，显示清除按钮)</h3>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="testNoBtn">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>
            <p>
                <br><code>clearable: true,</code> //可清除已输入内容
                <br><code>ignorecase: true,</code> //忽略大小写
                <br><code>effectiveFieldsAlias:{userName: "姓名"},</code> //有效字段别名
                <br><code>showHeader: true,</code> //显示 header
                <br><code>showBtn: false,</code> //不显示下拉按钮
                <br><code>delayUntilKeyup: true</code> //获取数据方式为 firstByUrl 时，延迟到有输入/获取到焦点时请求
            </p>
            <p><b>提示：</b>
                <br><code>clearable</code> 参数使用了 <code>glyphicons</code> 图标。<code>bootstrap v4</code> 默认不带该图标样式，所以该参数不会生效。此时可自行在 <code>html</code> 代码的 <code>input</code> 输入框标签前添加 <code>i.clearable</code> 标签元素来实现。
                <br>例如，页面中引入了 <code>font-awesome</code>，可添加标签为（见下一个示例）：
<pre class="bg-info pd10">
&lt;i class="clearable fa fa-remove"&gt;&lt;/i&gt;
</pre>
            </p>

            <h3>测试(json 数据中获取)</h3>
            <p>默认启用空关键字检索。</p>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <i class="clearable fa fa-remove"></i>
                        <input type="text" class="form-control" id="test_data">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                测试
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>

            <h3>百度搜索</h3>
            <p>支持逗号分隔多关键字</p>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group" style="width: 300px;">
                        <input type="text" class="form-control" id="baidu">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>
            <p>
                <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
                <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
                <br><code>separator: ",",</code>         //多关键字支持时的分隔符
                <br><code>getDataMethod: "url"</code>    //总是从 URL 获取数据
            </p>

            <h3>百度搜索(预处理关键字)</h3>
            <p>支持逗号分隔多关键字</p>

            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon2">设置前置关键字</span>
                        <input type="text" class="form-control" id="preKeyword" value="魅族" placeholder="输入搜索前置关键字"  aria-describedby="sizing-addon2">
                    </div>
                </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="baiduPreKeyword">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>
            <p>
                <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
                <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
                <br><code>separator: ",",</code>         //多关键字支持时的分隔符
                <br><code>getDataMethod: "url",</code>   //获取数据的方式，总是从 URL 获取
            </p>
<pre class="bg-info pd10">fnPreprocessKeyword: function(keyword) {
//请求数据前，对输入关键字作预处理
    return $.trim($('#preKeyword').val()) + keyword;
}</pre>


            <h3>百度搜索(ajax 请求前回调调整参数)</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon2">预定义关键字</span>
                        <input type="text" class="form-control" id="customKeyword" value="flyme " placeholder="输入搜索前置关键字"  aria-describedby="sizing-addon2">
                    </div>
                </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="baiduAdjustAjaxParam" value="5">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>
            <p>
                <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
                <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
                <br><code>separator: ",",</code>         //多关键字支持时的分隔符
                <br><code>getDataMethod: "url",</code>   //总是从 URL 获取数据
            </p>
<pre class="bg-info pd10">
fnAdjustAjaxParam: function(keyword, opts) {
//调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
    console.log('ajax 请求参数调整：', keyword, opts);
    return {
        timeout: 10000,
        data: {
            t: (new Date()).getTime(),
            wd: $('#customKeyword').val() +  keyword
        }
    };
}
</pre>

            <h3>淘宝搜索 <sub><a href="https://jsfiddle.net/renxia/2qafjffp/" target="_blank">试一试</a></sub></h3>
            <p>支持逗号分隔多关键字，并展示列表表头。</p>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="taobao">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                        <!-- /btn-group -->
                    </div>
                </div>
            </div>

            <p>
                <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
                <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
                <br><code>separator: ",",</code>         //多关键字支持时的分隔符
                <br><code>getDataMethod: "url",</code>   //总是从 URL 获取数据
                <br><code>autoDropup: true,</code>       //自动判断向上/下
                <br><code>showHeader: true,</code>       //显示多个字段的表头
                <br><code>effectiveFieldsAlias: {Id: "序号", Keyword: "关键字", Count: "数量"}</code> //showHeader 时，header 别名
            </p>
        </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script id="bsjs" src="../lib/bsv3/dropdown.js"></script>
    <script src="../src/bootstrap-suggest.js"></script>
    <script src="demo.js?ver=20160422"></script>
</body>

</html>
